<!--
 * @Descripttion: 登录页面
 * @version: 
 * @Author: hzx
 * @Date: 2021-03-24 22:22:56
 * @LastEditors: hzx
 * @LastEditTime: 2021-05-14 00:00:01
-->
<template>
    <div class="login-container">
        <a-row>
            <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
                <div class="login-container-form">
                    <div class="login-container-hello">登录</div>
                    <div class="login-container-title">
                        欢迎来到 学生信息管理系统
                    </div>
                    <a-form
                        :model="loginForm"
                        @submit="submit"
                        :rules="loginFormRules"
                        ref="loginFormRef"
                        :wrapperCol="{ span: 24 }"
                    >
                        <a-form-item name="username">
                            <a-input
                                v-model:value="loginForm.username"
                                placeholder="请输入用户名"
                            >
                                <template v-slot:prefix>
                                    <UserOutlined
                                        style="color: rgba(0, 0, 0, 0.25)"
                                    />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item name="password">
                            <a-input
                                v-model:value="loginForm.password"
                                type="password"
                                placeholder="请输入密码"
                            >
                                <template v-slot:prefix>
                                    <LockOutlined
                                        style="color: rgba(0, 0, 0, 0.25)"
                                    />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item :wrapperCol="{ span: 24 }">
                            <a-button
                                type="primary"
                                html-type="submit"
                                :disabled="
                                    loginForm.username === '' ||
                                    loginForm.password === ''
                                "
                                style="width: 100%"
                            >
                                登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-col>
        </a-row>
        <div class="login-container-tips">@2021 -- 学生信息管理系统</div>
    </div>
</template>
<script lang="js">
    import { dependencies, devDependencies } from '../../package.json';
    import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
    import {message, notification } from 'ant-design-vue';
    import { studentLogin, teacherLogin } from '@/api/login' 
    export default {
        name: 'Login',
        components: {
            UserOutlined,
            LockOutlined,
        },
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                },
                redirect: undefined,
                dependencies: dependencies,
                devDependencies: devDependencies,
                loginFormRules: { // 表单验证规则对象
                    username: [
                        { required: true, message: '请输入您的用户名', trigger: 'blur' }, // 必填，警告语，失去焦点触发校验
                        { min: 4, max: 8, message: '长度在 4到 8 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入您的密码', trigger: 'blur' },
                        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        watch: {
            $route: {
                handler(route) {
                    this.redirect = (route.query && route.query.redirect) || '/'
                },
                immediate: true,
            },
        },
        mounted() {
            this.loginForm.username = '1018'
            this.loginForm.password = '123123'
           
        },
        methods: {
           async submit () {
               if (this.loginForm.username.length === 4) {
                   await teacherLogin({userName: this.loginForm.username, password: this.loginForm.password})
                    .then(
                        res => {
                            if (res[0].t_id) {
                                this.$store.commit('changeResourceId', {...res[0]});
                                message.success('登录成功',3)
                                this.$router.push('/home')
                            }
                        } 
                    )
               } else if (this.loginForm.username.length === 5) {
                   await teacherLogin({userName: this.loginForm.username, password: this.loginForm.password})
                    .then(
                          res => {
                            if (res[0].t_id) {
                                this.$store.commit('changeResourceId', {...res[0]});
                                message.success('登录成功',3)
                                this.$router.push('/home')
                            }
                        } 
                    )
               } else if (this.loginForm.username.length === 8) {
                   await studentLogin({userName: this.loginForm.username, password: this.loginForm.password})
                    .then(
                        res => {
                            ////console.log(res[0].stu_id)
                            if (res[0].stu_id) {
                                this.$store.commit('changeResourceId', {...res[0]});
                                message.success('登录成功',3)
                                this.$router.push('/stuhome')
                            }
                        }
                    )
               } else {
                   message.error('账号或密码错误') 
               }
            }
        },
    }
</script>
<style lang="less">
.login-container {
    height: 100vh;
    background: url("../assets/image/login_background.png");
    background-size: cover;
    &-form {
        width: calc(100% - 40px);
        height: 380px;
        padding: 4vh;
        margin-top: calc((100vh - 380px) / 2);
        margin-right: 20px;
        margin-left: 20px;
        background: url("../assets/image/login_form.png");
        background-size: 100% 100%;
        border-radius: 10px;
        box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    }
    &-hello {
        font-size: 32px;
        color: #fff;
    }
    &-title {
        margin-bottom: 30px;
        font-size: 20px;
        color: #fff;
    }
    &-tips {
        position: fixed;
        bottom: 20px;
        width: 100%;
        height: 40px;
        color: rgba(255, 255, 255, 0.856);
        text-align: center;
    }
    .ant-input {
        width: 400px;
        height: 35px;
    }
    .ant-btn {
        width: 300px;
        height: 45px;
        border-radius: 99px;
    }
}
</style>
